<template>
<div class="app-container height100">
  <div>
  <div class="menu-navbar">
      <el-button type="success" size="small" @click="edit()" style="z-index: 1;">编辑
      </el-button>
  </div>
  <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" label-width="110px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="路由标题" prop="title">
          <el-input v-model="appendlist.title" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由名称" prop="name">
          <el-input v-model="appendlist.name" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="路由路径" prop="path">
          <el-input v-model="appendlist.path" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由转发路径" prop="redirect">
          <el-input v-model="appendlist.redirect" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="组件地址" prop="component">
          <el-input v-model="appendlist.component" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="appendlist.icon" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="英文名称" prop="nameEn">
          <el-input v-model="appendlist.nameEn" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <!--<el-col :span="12">-->
        <!--<el-form-item label="是否可配置实用工具" prop="isUtilityConfiguration">-->
          <!--<el-select v-model="appendlist.isUtilityConfiguration" clearable placeholder="" :disabled="true">-->
            <!--<el-option-->
              <!--v-for="item in HiddenOptions"-->
              <!--:key="item.type"-->
              <!--:label="item.value"-->
              <!--:value="item.type">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
      <!--</el-col>-->
      <el-col :span="12">
        <el-form-item label="是否可被搜索" prop="isSearch">
          <el-select v-model="appendlist.isSearch" clearable placeholder="是否可被搜索" :disabled="true">
            <el-option
              v-for="item in isSearchOptions"
              :key="item.type"
              :label="item.value"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="功能类型" prop="type">
          <el-select v-model="appendlist.type" clearable placeholder="" :disabled="true">
            <el-option
              v-for="item in typeOptions"
              :key="item.codeKey"
              :label="item.codeName"
              :value="item.codeKey">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否隐藏" prop="isHidden">
          <el-select v-model="appendlist.isHidden" clearable placeholder="" :disabled="true">
            <el-option
              v-for="item in HiddenOptions"
              :key="item.type"
              :label="item.value"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input v-model="appendlist.sort" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Tab 标签 ID" prop="tabId">
          <el-input v-model="appendlist.tabId" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="API 访问地址" prop="apiUrl">
          <el-input v-model="appendlist.apiUrl" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="API 访问Method" prop="apiMethod">
          <el-select v-model="appendlist.apiMethod" clearable placeholder="" :disabled="true">
            <el-option
              v-for="item in methodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="所属子系统" prop="subsysid">
          <el-select v-model="appendlist.subsysid" clearable placeholder="" :disabled="true">
            <el-option
              v-for="item in subsys.records"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否在tab栏显示" prop="tabIsHidden">
          <el-select v-model="appendlist.tabIsHidden" clearable placeholder="是否显示" :disabled="true">
            <el-option
              v-for="item in tabsOptions"
              :key="item.type"
              :label="item.value"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="第三方链接类型" prop="linkType">
          <el-select v-model="appendlist.linkType" clearable placeholder="第三方链接类型" :disabled="true">
            <el-option
              v-for="item in linkTypeOptions"
              :key="item.codeKey"
              :label="item.codeName"
              :value="item.codeKey">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="链接" prop="href">
          <el-input type="textarea"  v-model="appendlist.href" placeholder="" :rows="1" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否加载页面缓存" prop="nocache">
          <el-select v-model="appendlist.nocache" clearable placeholder="是否加载页面缓存" :disabled="true">
            <el-option
              v-for="item in nocacheOptions"
              :key="item.type"
              :label="item.value"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="app是否使用" prop="appIsUse">
          <el-select v-model="appendlist.appIsUse" clearable placeholder="app是否使用" :disabled="true">
            <el-option
              v-for="item in appIsUseOptions"
              :key="item.type"
              :label="item.value"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"  v-if="appendlist.appIsUse ==='1'">
        <el-form-item label="工作流业务类型ID" prop="workFlowBusinessId">
          <el-input type="textarea"  v-model="appendlist.workFlowBusinessId" placeholder="工作流业务类型ID" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea"  v-model="appendlist.remarks" placeholder=""  :disabled="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      tabsOptions: [
        {
          type: '0',
          value: '否'
        },
        {
          type: '1',
          value: '是'
        }
      ],
      appIsUseOptions: [
        {
          type: '0',
          value: '否'
        },
        {
          type: '1',
          value: '是'
        }
      ],
      nocacheOptions: [
        {
          type: '0',
          value: '否'
        },
        {
          type: '1',
          value: '是'
        }
      ],
      updateVisible: false,
      appendlist: {},
      MenuTree: {
        condition: [
          {
            property: 'id',
            value: '',
            type: 'EQ'
          }
        ]
      },
      typeOptions: [],
      linkTypeOptions:[],
      methodOptions: [
        {
          type: '0',
          value: 'GET'
        },
        {
          type: '1',
          value: 'POST'
        },
        {
          type: '2',
          value: 'HEAD'
        },
        {
          type: '3',
          value: 'OPTIONS'
        },
        {
          type: '4',
          value: 'PUT'
        },
        {
          type: '5',
          value: 'DELETE'
        },
        {
          type: '6',
          value: 'TRACE'
        },
        {
          type: '7',
          value: 'CONNECT'
        }
      ],
      HiddenOptions: [
        {
          type: '0',
          value: '否'
        },
        {
          type: '1',
          value: '是'
        }
      ],
      isSearchOptions: [
        {
          type: '0',
          value: '否'
        },
        {
          type: '1',
          value: '是'
        }
      ],
      subsys: {},
      subsyslist: {

      }
    }
  },
  created() {
    this.GetCodeList()
    this.GetLinkTypeCodeList()
    this.fetchData()
    this.subsysData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route.name': ['fetchData', 'subsysData']
  },
  beforeRouteUpdate(to, from, next) {
    // just use `this`
    next()
    this.fetchData()
    this.subsysData()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fetchData()
      vm.subsysData()
    })
  },
  methods: {
    GetCodeList() {
      let args = {}
      args.codeType = 'ORG_TYPE_CATEGORY_CODE'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.typeOptions = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    GetLinkTypeCodeList() {
      let args = {}
      args.codeType = 'LINK_TYPE_CATEGORY_CODE'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.linkTypeOptions = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    fetchData() {
      this.loading = true
      this.MenuTree.condition[0].value = this.$route.params.id
      this.$store.dispatch('MenuTreeSelect', this.MenuTree).then(res => {
        this.appendlist = res.data.records[0]
        this.$emit('listfresh')
        // this.subsyslist.condition[0].value = res.data.records[0].subsysid
        // console.log(this.appendlist)
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    subsysData() {
      this.loading = true
      this.$store.dispatch('SubsysSelect', this.subsyslist).then(res => {
        this.subsys = res.data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    updateData() {
      this.loading = true
      this.appendlist.id = this.$route.params.id
      this.$store.dispatch('MenuUpdate', this.appendlist).then(res => {
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    edit() {
      this.$router.push({
        name: 'menuUpdate',
        params: {
          id: this.$route.params.id
        }
      })
    }
  }
}
</script>
<style scoped>
  .height100{
   /* overflow-x: hidden;*/
    overflow-y: auto;
  }

  .menu-navbar{
    padding:10px;
    text-align: right;
  }
</style>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}
</style>
